<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>职工人事后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.5.5/css/layui.css" media="all" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      body {
        margin: 0;
    padding: 0;
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
    /* 指定背景图像的大小 */
    background-size: 500%;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: bgAnimation 15s linear infinite;
      }
      @keyframes bgAnimation {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
      body:after {
        content: "";
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
      }
      .layui-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .admin-login-background {
        width: 360px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -180px;
        margin-top: -100px;
      }
      .logo-title {
        text-align: center;
        letter-spacing: 2px;
        padding: 14px 0;
      }
      .logo-title h1 {
        color: rgb(40, 144, 233);
        font-size: 25px;
        font-weight: bold;
      }
      .login-form {
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
        padding: 14px 20px;
        box-shadow: 0 0 8px #eeeeee;
      }
      .login-form .layui-form-item {
        position: relative;
      }
      .login-form .layui-form-item label {
        position: absolute;
        left: 1px;
        top: 1px;
        width: 38px;
        line-height: 36px;
        text-align: center;
        color: #d2d2d2;
      }
      .login-form .layui-form-item input {
        padding-left: 36px;
      }
      .captcha {
        width: 60%;
        display: inline-block;
      }
      .captcha-img {
        display: inline-block;
        width: 34%;
        float: right;
        cursor: pointer;
      }
      .captcha-img img {
        height: 34px;
        border: 1px solid #e6e6e6;
        height: 36px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="layui-container">
      <div class="admin-login-background">
        
        <div class="layui-form login-form">
          <form class="layui-form" action="">
            <div class="layui-form-item logo-title">
              <h1>papitube人事管理系统</h1>
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-username" for="username"></label>
              <input type="text" name="username" lay-verify="required" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin" />
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-password" for="password"></label>
              <input type="password" name="password" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" />
            </div>
            <div class="layui-form-item">
              <label class="layui-icon layui-icon-vercode" for="captcha"></label>
              <input type="text" name="code" id="code" lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input verification captcha" />
              <div class="captcha-img">
                <img id="captchaPic" src="" />
              </div>
              <input type="hidden" name="timestamp" id="timestamp" />
            </div>
            <div class="layui-form-item">
              <button id="btn-login" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <script src="../../layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../layuimini/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../layuimini/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <script src="../../layuimini/js/lay-config.js" charset="utf-8"></script>
    <script src="../../layuimini/api/core.util.js" charset="utf-8"></script>

    <script>
      layui.use(["form", "common"], function () {
        var form = layui.form,
          layer = layui.layer,
          common = layui.common,
          $ = layui.jquery;

        var timestamp = new Date().getTime();
        function getCode() {
          $("#captchaPic").attr("src", common.api + "/image?timestamp=" + timestamp + "&v=" + new Date().getTime());
          $("#timestamp").val(timestamp);
        }

        layer.ready(function () {
          getCode();

          $("#captchaPic").click(function () {
            getCode();
          });
        });

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
          $(".layui-container").particleground({
            dotColor: "#e6e6e6",
            lineColor: "#e6e6e6",
            minSpeedX: 0.05,
            maxSpeedX: 0.3,
            directionX: "center",
            density: 20000,
            particleRadius: 12,
            lineWidth: 3,
            curvedLines: false,
            proximity: 90,
            parallax:false,
            parallaxMultiplier: 4,
          });
        });

        // 进行登录操作
        form.on("submit(login)", function (data) {
          $("#btn-login").attr("disabled", "disabled").addClass("layui-btn-disabled");
          data = data.field;
          console.log(data);

          $.ajax({
            url: common.api + "/user/login",
            type: "post",
            contentType: "application/json; charset=utf-8",
            timeout: 5000,
            data: JSON.stringify(data),
            success: function (data) {
              console.log(data);
              if (data.code == 200) {
                layer.msg("登录成功", { icon: 1 }, function () {
                  common.setToken(data.data);
                  window.location = "../index.html";
                  console.log(common.getToken());
                });
              } else {
                getCode();
                $("#code").val("");
                layer.msg(data.msg, { icon: 2, time: 1000 });
                $("#btn-login").removeAttr("disabled", "disabled").removeClass("layui-btn-disabled");
              }
            },
            error: function (data) {
              console.log(data);
              layer.msg("服务器异常");
            },
          });

          return false;
        });
      });
    </script>
  </body>
</html>
